.container {
    padding: 0px;
}

scrollview.widgets > scroll-content {
    padding: 20px;
    alignment: top-center;
    vertical-gap: 15px;
}

tabview.widgets > scrollview > scroll-content {
    padding: 8px;
}

tabview.widgets tabheader label.tab-name {
    width: 220px;
}

tabview.widgets tabheader:checked label.tab-name {
    corner-radius: 4px;
    background-color: #51afef;
}

vstack.panel {
    height: auto;
    width: 3s;
    min-width: 500px;
    max-width: 700px;
}

label.title {
    font-size: 30;
    font-weight: bold;
    bottom: 20px;
}

label.header {
    font-size: 20;
    font-weight: bold;
    bottom: 6px;
    top: 24px;
}

label.paragraph {
    width: 1s;
    text-wrap: true;
    bottom: 12px;
}

demo-region {
    corner-radius: 4px;
    /* padding: 40px; */
    /* padding-left: 1s;
    child-right: 1s; */
    height: auto;
    border: 1px #d2d2d2;
}

demo-region label.code {
    corner-top-left-radius: 0px;
    corner-top-right-radius: 0px;
    height: auto;
    width: auto;
}

demo-region hstack.controls {
    height: auto;
    padding: 4px;
    background-color: #f4f4f4;
    corner-bottom-left-radius: 4px;
    corner-bottom-right-radius: 4px;
    alignment: right;
}

demo-region toggle-button svg {
    size: 20px;
}

demo-region.open hstack.controls {
    corner-radius: 0px;
}

demo-region hstack.region {
    corner-radius: 4px;
    padding: 50px;
    alignment: center;
    height: auto;
    min-height: 100px;
    horizontal-gap: 12px;
}

demo-region > divider {
    background-color: rgb(210, 210, 210);
}

demo-region > hstack.code {
    background-color: #2d343f;
    color: white;
    font-family: monospace;
    width: 1s;
    padding: 10px;
    corner-radius: 4px;
    corner-top-left-radius: 0px;
    corner-top-right-radius: 0px;
    font-size: 14;
}

markdown {
    padding: 0px;
}
